<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  

  >
 
  <h2>ECB</h2>
    <el-menu-item class="ele" index="/"><router-link to="/">首页</router-link></el-menu-item>
    <el-sub-menu class="ele" index="2">
      <template style="" #title >商品分类</template>
      <el-menu-item class="ele" v-for="mua in typelist" :key="mua.length" ><router-link :key="$route.fullPath" :to="{path:'/sp',query:{name:mua}}">{{mua}}</router-link></el-menu-item>
    </el-sub-menu>
    <el-menu-item class="ele" index="3"><router-link to="/my">关于我们</router-link></el-menu-item>
    <el-menu-item v-if="lastname !='ecb'" class="ele" index="4"><router-link to="/shoppingcart">购物车</router-link></el-menu-item>
    <el-menu-item v-if="lastname !='ecb'" class="ele" index="5"><router-link to="/order">订单</router-link></el-menu-item>
    <el-menu-item v-if="lastname !='ecb'" class="ele" index="6"><router-link to="/favorites">收藏</router-link></el-menu-item>
    <el-form
              label-width="150px"
              ref="sosuo"
              :model="sosuo"
              status-icon
            ><el-col :span="8" class="sosuo"><el-input v-model="sosuo.str1" size="small" type="text"></el-input>
    
    </el-col>
    <el-button style="background-color:#545c64;border:0;color:white;margin-top:10px" @click="addsosuo('sosuo')">搜索</el-button></el-form>
    
    

    <span id="username" class="user-name" v-if="lastname =='ecb' ">{{lastname}}</span>
    
    <span id="username" class="user-name" v-else>{{lastname}}</span>
   
    <el-button style="background-color:#545c64;border:0;color:white" v-if="lastname !='ecb' " @click="off">注销</el-button>
    <el-button style="background-color:#545c64;border:0;color:white" v-else @click="on">登录 注册</el-button>
     
      
  </el-menu>
  
  
</template>
<script>
import { defineComponent, ref ,reactive,toRefs} from 'vue'
import { getCurrentInstance } from 'vue'
import axios from 'axios'

// function sosuo(state){
//   const sosuo=()=>{
    
//       console.log(state.str)
//     window.sessionStorage.setItem('sosuo', state.str)
    
//   }
//   return{
//     sosuo
//   }
// }

export default defineComponent({
  inject:['reload'],

  data(){
    var lastname1='ecb'
   if(sessionStorage.getItem('token') == null){
     lastname1
   }else{
      lastname1=JSON.parse(sessionStorage.getItem("token"))
   }
   //alert(lastname1)
    const typelist=[]
   axios({
                url: "/goodstypejson",
                method: "get",
                
            }).then((res)=>{
              var u=res.data.data
              var i=0;
              for(i;i<u.length;i++){
                
                typelist.push(u[i].name)
              }
               console.log(typelist)
               
            });
    const state = reactive({
      str: "",
    });
    return{
      // ...sosuo(state),
      sosuo:{
        str1:'',
      }
        ,
      
      ...toRefs(state),
      lastname:lastname1,
        typelist:typelist,
        
            }
  },
  methods: {
    off(){
      sessionStorage.clear();
      this.$router.go(0)
      // this.reload();
      // this.$router.push({
      //   path: '/'
      // })
    },
    on(){
       this.$router.push({
         path: '/login'
       })
    },
    addsosuo(sosuo){
      this.$refs[sosuo].validate((valid) => {
        var name=this.sosuo
        if(name.str1 !=''){
          window.sessionStorage.setItem('sosuo', name.str1)
          this.$router.push("/selectByName")
          this.reload();
        }else{
          window.sessionStorage.setItem('sosuo', name.str1)
        }
      
    })
      
    }
    
    
  },
  mounted(){
    
    
  },
  setup() {
   
    const { proxy } = getCurrentInstance();
    
    const activeIndex2 = ref('/')
    const handleSelect = (key, keyPath) => {
    //  console.log(key, keyPath)
    }
    //  const state = reactive({
    //   str: "",
    // });

    return {
      proxy,
      activeIndex2,
      //  ...toRefs(state),
      // ...sosuo(state),
      handleSelect,
    }
  },
})
</script>
<style>

a{
  
  text-decoration: none;
  padding: 0 25px;
  color: white;
}
.ele{
  padding:0 !important;
  margin: 0 10px !important;
}
.sosuo{
  margin:15px 0 0 20px;
}
.sosuo .el-input__inner{
  background-color: rgb(86, 95, 104) !important;
  color:white;
}
.usern{
  float: right !important;
}
.user-name{
  /* line-height: 35px; */
   padding:7px ;
  color: white;
  font-size: 15px;
  border: 1px solid rgb(199, 198, 198);
  /* border-radius: 4%; */
  height: 40px;
  margin:10px 20px 0 80px;
}
h2{
  margin: 0;
  padding:6px 20px 0 10%;
  ;
}

</style>